<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" title="导入网关" width="500px">
    <div class="mb20 c-999">注意：请下载模板，并编辑,再上传！</div>
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="下载模板">
        <el-button size="mini" type="primary" icon="el-icon-download" @click="downloadExcel">下载</el-button>
      </el-form-item>
      <el-form-item label="附件名称">
        <el-input placeholder="输入附件名称" v-model="form.pro_key" style="width: 370px;" maxlength="15" />
      </el-form-item>
      <el-form-item label="备注" prop="mark">
        <el-input placeholder="输入备注" type="textarea" v-model="form.mark" style="width: 370px;" maxlength="30" />
      </el-form-item>
      <el-form-item label="上传附件">
        <el-upload
          class="upload-demo"
          :action="excel_url"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :file-list="fileList"
        >
          <el-button size="mini" type="primary" icon="el-icon-upload">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls、xlsx文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadurl from '@/http/uploadconfig'
export default {
  name: "addnet",
   props: {
    cur_this: {
      type: Object,
      required: null
    }
  },
  data() {
    return {
      excel_url:uploadurl.excel_url,
      dialog: false,
      loading: false,
      form: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      fileList: [],
      is_exls: false
    };
  },
  methods: {
    doInit(){
      this.fileList = [];
      this.form = {}
    },
    cancel() {},
    doSubmit() {
      if(!this.is_exls){
        this.$message({
          message: "请选择xls、xlsx文件",
          type: "error"
        });
        return;
      }
      this.dialog = false;
      this.cur_this.getList();
      this.doInit();
      this.$message({
          message: "上传成功",
          type: "success"
        });
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     this.dialog = false;
      //     console.log(this.$refs);
      //     console.log(this.$parent.value);
      //   }
      // });
    },
    downloadExcel() {
      window.open("/static/gateway_template.xlsx");
    },
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "warning"
        });
      }
      // if(!isLt2M) {
      //     this.$message({
      //         message: '上传文件大小不能超过 10MB!',
      //         type: 'warning'
      //     });
      // }
      // return extension || extension2 && isLt2M
      return extension || extension2;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning('最多上传一个文件');
    },
    beforeRemove(file, fileList) {
      this.is_exls = false
      return true;
    },
    handleSuccess(response, file, fileList) {
      if (response.status===200) {
        this.is_exls = true
      }
    }
  }
};
</script>

<style lang="scss">
</style>
